<template>
  <div class="home">
    <div class="top_right_btn">
      <!-- <el-button icon="el-icon-setting" circle></el-button> -->
    </div>
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div class="border">
      <!-- 拖拽上传 -->
      <el-upload
        ref="upload"
        class="upload-demo"
        show-file-list
        action="https://jsonplaceholder.typicode.com/posts/"
        :drag="true"
        :on-change="handleChange"
        :limit="1"
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将试题文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div class="tips_text">注意：将老师下发的试题文件上传后自动跳转页面开始考试，试题文件名格式为“xxx_yzsy.xlsx”，上传失败时举手报告老师！</div>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  name: "Home",
  components: {
    // HelloWorld,
  },
  data(){
    return{
      originData: [], // 原始表格数据
      originName: '', // 文件名
    }
  },
  methods: {
    handleChange(file) {
      console.log('file ===> ', file)
      // console.log('fileList ===> ', fileList)
      this.originName = file.name.split('.')[0]
      this.readExcel({0:file.raw});
    },
    readExcel (files) { // 表格导入
      if (files.length <= 0) { // 如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (files) => {
        try {
          const data = files.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0]// 取第一张表
          console.log('wsname ----->', wsname, workbook)
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// 生成json表格内容
          console.log(ws, 'ws是表格里的数据，且是json格式')
          this.originData = ws
          this.dealTest()
          // 重写数据
          this.$refs.upload.value = ''
          // return ws
        } catch (e) {
          console.log(e)
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    },
    dealTest() { // 处理试卷内容，存入sessionStorage，跳转页面
      try {
        if(this.originName.split('_')[1] != 'yzsy') {
          throw new Error("文件错误！")
        }
        this.originData.forEach(item => {
          if(!item.type){
            throw new Error("文件内容有误！")
          }
          item.type = item.type == "选择" ? "select" : item.type == "判断" ? "torf" : item.type == "文字录入" ? "textarea" : ""
        })
        sessionStorage.setItem('testContent', JSON.stringify(this.originData))
        this.$router.push('/test');
      } catch (error) {
        console.log("error", error)
        this.$message({
          type: "error",
          message: "文件错误，请确认导入文件是否为老师下发的文件，或报告老师！"
        })
      }
    }
  }
};
</script>
<style lang="less" scoped>
.border{
  margin: 100 auto;
  text-align: center;
  padding: 50px 100px;
  margin-top: 100px;
}
.top_right_btn{
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  font-size: 30px;
}
.tips_text{
  margin: 30px auto;
  font-size: 16px;
  color: #333;
  width: 470px;
  text-align: center;
}
</style>